<!---签证办理,签证图例-->
<template>
    <div class="picture-flow">
        <div class="picture-header_box">
            <p>签证图例</p>
        </div>
        <div class="visa-pic">
            <el-image
                :src="picurl"
                :preview-src-list="srcList"
                :initial-index="4"
                fit="cover"
            />
        </div>
    </div>
</template>
<script>import { ref, watch } from "vue"

export default {
    props: {
        urlState: {
            type: String,
            default: ''
        }
    },
    setup(props, { emit }) {
        let picurl = ref(''),
            srcList = ref([])
        watch(() => props.urlState, (newVal, oldVal) => {
            picurl.value = newVal
            console.log(picurl.value)
            srcList.value.push(newVal)
        })
        return { picurl, srcList }
    }
}
</script>
<style lang="less" scoped>
.picture-flow {
    border-radius: 2px;
    background-color: #fff;
    min-height: 300px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%);
    background: #fff;
    border-radius: 2px;
    margin-top: 12px;
    .picture-header_box {
        padding: 12px;
        border-bottom: 1px solid #e8e8e8;
        p {
            font-size: 20px;
            font-weight: 600;
        }
    }
    .visa-pic {
        padding: 15px;
        .el-image{
            width: 370px;
            height: 256px;
        }
    }
}
</style>